<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    .mui_comm_head{ padding: 0; line-height: 40px; height: 40px; vertical-align: middle; }
    .mui_comm_head .comm_title { padding-top: 2px; }
    .focus { height:40px; line-height:40px; vertical-align: middle; float: right; }
    .focus_btn{ font-size: 13px; padding: 0 15px; background: #1abf8a; display: inline-block; width: 70px; height: 30px; line-height: 30px; border-radius: 5px; }
    .focus_btn.on{ background: #999; }
</style>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/payDialog.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/app/plugins/flavr/css/flavr.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>/app/css/appLogin.css">
<!--detail-content-->
<div class="detail-content">
    <div id="content-detail">
        <script type="text/html" id="tpl-content">
            <!--title-->
            <div class="title">
                <h2>{{resultList.title}}</h2>
                <%--<p><a style="color: #458bd6;" id="author" data-id="{{resultList.unit_id}}">{{resultList.unit_name}}</a> {{formatTime resultList.create_time}}</p>--%>
                <div class="mui_comm_head">
                    <div class="comm_logo" data-id="{{resultList.unit_id}}">
                        <img src="{{resultList.unit_img}}"/>
                    </div>
                    <div class="comm_title" data-id="{{resultList.unit_id}}">
                        <a><h4 style="color: #458bd6;">{{resultList.unit_name}}</h4></a>
                        <p>{{formatTime resultList.create_time}}</p>
                    </div>
                    <div class="focus">
                        <div class="focus_btn {{if resultList.focus == 1}}on{{/if}}" >
                            <a href="javascript:;" id="focus" data-id="{{resultList.unit_id}}" style="color: #fff;">{{if typeof resultList.focus != 'undefined' && resultList.focus == 1}}已关注{{else}}+ 关注{{/if}}</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--/title-->
            <!--content-->
            <div class="content">
                <p></p>
                <img src="{{resultList.theme_img1}}" alt="" style="margin: 10px 0;" />
                {{if resultList.abstract_info}}
                <div style="background-color: #F1F1F1; color: #666; padding: .8rem; margin-bottom: 1rem;">
                    <p style="color: #666;">{{resultList.abstract_info}}</p>
                </div>
                {{/if}}
                <p>{{#resultList.content}}</p>
            </div>
            <!--/content-->
            <!--love-box-->
            <div class="love-box">
                <a href="javascript:;" class="btn-love" id="btnLike"><i></i><span id="collectNum">{{resultList.collect_num}}</span><span>人喜欢</span></a>
            </div>
            <!--/love-box-->
            <!--comment-list-->
            <div class="comment-list" id="commentList">
                <div class="title">
                    <h2>热门评论</h2>
                </div>
                <div class="content" id="commentWarp">
                    <!--comment-list-row-->
                    {{include 'tpl-comment' resultList.comment}}
                    <!--/comment-list-row-->
                </div>
                <div class="more-box">
                    <a href="javascript:;" id="loadCommentMore">加载更多</a>
                </div>
            </div>
            <!--/comment-list-->
            </div>
            <!--/detail-content-->
            <!--detail-comment-area-->
            <div class="detail-comment-area">
                <div class="item-list">
                    <a class="item bnt-back"><i class="icon icon-back"></i></a>
                    <a class="item" id="commentWrite"><i class="icon icon-write"></i></a>
                    <a class="item" href="#commentList" id="comment"><i class="icon icon-comment"></i><span class="number">{{resultList.comment_num}}</span></a>
                    <a class="item {{if resultList.collection == 1}}hover{{/if}}" id="commentStar"><i class="icon icon-star"></i></a>
                    <a class="item" id="commentFace" {{if resultList.user_motion}}disabled{{/if}}><i class="icon icon-face {{resultList.user_motion}}"></i></a>

                </div>
                <div class="face-list">
                    <a class="item bnt-back"></a>
                    <a class="item" data-icon="icon-anger"><i class="icon icon-anger"></i></a>
                    <a class="item" data-icon="icon-answer"><i class="icon icon-answer"></i></a>
                    <a class="item" data-icon="icon-cry"><i class="icon icon-cry"></i></a>
                    <a class="item" data-icon="icon-awkward"><i class="icon icon-awkward"></i></a>
                    <a class="item" data-icon="icon-smile"><i class="icon icon-smile"></i></a>
                    <a class="item" id="closeFace"><i class="icon icon-close"></i></a>
                </div>
                <form action="#" method="post" class="upload-comment">
                    <div class="btn-box">
                        <button type="button" class="btn-cancel">取消</button>
                        <button type="button" class="btn-submit">发布</button>
                    </div>
                    <textarea class="tta" rows="5" placeholder="请输入内容" id="inputComment"></textarea>
                </form>
                <div class="waterMark"></div>
            </div>
            <!--/detail-comment-area-->
        </script>
    </div>
</div>
<!-- 更多评论 -->
<script type="text/html" id="tpl-comment">
    {{each list as value i}}
    <div class="comment-list-row">
        <div class="item left">
            <div class="head" style="background-image: url('{{if value.head_url}}{{value.head_url}}{{/if}}'"></div>
        </div>
        <!--right-->
        <div class="item right">
            <div class="top-info">
                <a class="clickGood {{if value.is_up == 1}}hover{{/if}}" data-up="{{value.is_up}}" data-id="{{value.id}}">{{value.fabulous_num}}</a>
                <h3><span class="username">{{value.user_name}}</span><span>{{formatTime value.create_time}}</span></h3>
            </div>
            <div class="cont">
                <p>{{value.comment}}</p>
            </div>
            {{if value.reply}}
            <div class="reply">
                <p>小编：{{value.reply}}</p>
            </div>
            {{/if}}
        </div>
        <!--/right-->
    </div>
    {{/each}}
</script>
<!-- 付费资讯 -->
<div class="pay-dialog">
    <script type="text/html" id="tpl-payDetail">
        <form action="#" method="post" id="payForm">
            <header>
                <h1>付费阅读</h1>
            </header>
            <div class="content">
                <p>试读已结束，通过以下方式获取更多精彩<span style="color: red">注：单篇购买可享受单篇阅读永久阅读权，包月订阅可享受全部阅读一月阅读权</span></p>
                <div class="list">
                    <div class="radio"><input type="radio" name="rd" value="1" checked /><span class="alone">单篇购买(￥{{dealAmount resultList.money}})</span></div>
                    <div class="radio"><input type="radio" name="rd" value="2" /><span class="year">包月订阅(￥{{dealAmount resultList.month_charge}})</span></div>
                </div>
            </div>
            <footer>
                <button type="button" class="btn-pay-cancel">取消</button>
                <button type="button" class="btn-pay active" id="btnPay">立即支付</button>
            </footer>
        </form>
    </script>
</div>
<script type="text/javascript" src="<%=basePath%>/app/plugins/flavr/js/myFlavr.js"></script>
<script>
    var _offset = 1, _total = 0,isScroll = false,_isOpen = false;
    function loadCommentEvent() {
        var _commentNav = mui('div.detail-comment-area'),       //评论区域节点
            _body = $('html, body');


        //- - - - - - - - - - 评论列表 - - - - - - - - - -
        //滑动到评论列表位置
        _commentNav.on('tap', '#comment', function(){
            var _target = $($(this).attr('href'));
            if('undefined' !== typeof _target.get(0)){
                mui.scrollTo(_target.offset().top, 200);
            }
        });

        //- - - - - - - - - - 评论 - - - - - - - - - -
        //显示与隐藏 评论框
        function toggleCommentList(){
            var _comment$Nav = $(_commentNav[0]), _commentClass = 'comment';
            if(!_comment$Nav.hasClass(_commentClass)){
                _isOpen = true;
                _comment$Nav.addClass(_commentClass);
                _body.css({
                    'height' : $(window).height(),
                    'overflow': 'hidden'
                });
                setTimeout(function(){
                    $('#inputComment').focus();
                }, 500);
            }else{
                _isOpen = false;
                _comment$Nav.removeClass(_commentClass);
                _body.css({
                    'height' : '',
                    'overflow': ''
                });
                $('#inputComment').blur();
            }
        }

        //返回
        $(document).on('touchmove', function(e){
            if(_isOpen){
                toggleCommentList();
            }
        });

        //打开评论框
        _commentNav.on('tap', '#commentWrite', function(){
            toggleCommentList();
        });

        //取消评论
        _commentNav.on('tap', '.btn-cancel', function(){
            toggleCommentList();
        });

        //发布评论
        _commentNav.on('tap', '.btn-submit', function(){
            //ajax do something...
            $.ajax({
                url: _basePath + "/app/information/commentMake",
                data: {
                    comment: $("#inputComment").val(),
                    information_id: ${id}
                },
                dataType: 'json',
                success: function (data) {
                    if(typeof data.resCode != undefined && data.resCode == 0){
                        toggleCommentList();    //关闭评论窗口
                        mui.toast("评论成功");
                        $("#comment").find("span").text(parseInt($("#comment").find("span").text())+1);
                        $("#commentWarp").html("");
                        $('#inputComment').val("");
                        loadComment(0);
                    }else{
                        toggleCommentList();    //关闭评论窗口
                        mui.toast(data['message']);
                    }
                }
            });
        });

        //蒙板事件
        _commentNav.on('tap', '.waterMark', function(){
            toggleCommentList();        //关闭评论窗口
        });

        //- - - - - - - - - - 收藏 - - - - - - - - - -
        //添加心 事件
        _commentNav.on('tap', '#commentStar', function(){
            var _ele = $(this);
            $.ajax({
                url: _basePath + "/app/member/collect",
                data: {
                    business_id: ${id},
                    business_type:1
                },
                dataType: 'json',
                success: function (data) {
                    if(typeof data.resCode != undefined && data.resCode == 0){
                        _ele.addClass("hover");
                        $("#collectNum").text(parseInt($("#collectNum").text()) + 1)
                        mui.toast("收藏成功");
                    }else{
                        mui.toast(data['message']);
                    }
                }
            });
        });

        mui("body").on('tap', '#btnLike', function(){
            $.ajax({
                url: _basePath + "/app/member/collect",
                data: {
                    business_id: ${id},
                    business_type:1
                },
                dataType: 'json',
                success: function (data) {
                    if(typeof data.resCode != undefined && data.resCode == 0){
                        $("#commentStar").addClass("hover");
                        $("#collectNum").text(parseInt($("#collectNum").text()) + 1);
                        mui.toast("收藏成功");
                    }else{
                        mui.toast(data['message']);
                    }
                }
            });
        });

        //- - - - - - - - - - 表情添加 - - - - - - - - - -
        var _faceClass = 'face', _face = $('#commentFace').find('i.icon');

        function toggleFace(){
            var _comment$Nav = $(_commentNav[0]);
            if(!_comment$Nav.hasClass(_faceClass)){
                _comment$Nav.addClass(_faceClass);
            }else{
                _comment$Nav.removeClass(_faceClass);
            }
        }

        //打开 笑脸事件
        _commentNav.on('tap', '#commentFace', function(){
            var _disabled = $(this).attr('disabled');
            if('undefined' === typeof _disabled){
                toggleFace();
            }else{
                mui.toast("你已经发表过情绪了哦~~")
            }
        });

        //关闭 笑脸事件
        _commentNav.on('tap', '#closeFace', function(){
            toggleFace();
        });

        //选笑脸
        _commentNav.on('tap', 'a.item[data-icon]', function(){
            var motion = $(this).data('icon');
            //选中事件
            $.ajax({
                url: _basePath + "app/information/motion",
                data: {
                    id: ${id},
                    motion:motion
                },
                dataType: 'json',
                success: function (data) {
                    if(typeof data.resCode != undefined && data.resCode == 0){
                        mui.toast("情绪发表成功");
                        _face.attr('class', 'icon icon-face').addClass(motion);
                        toggleFace();
                        _commentNav.off('tap', '#commentFace');
                    }else{
                        mui.toast(data['message']);
                    }
                }
            });
        });
    }

    //加载事件
    function loadEvent(){
        //加载详情数据
        $.ajax({
            url: _basePath + "app/information/detail",
            data: {id: ${id} },
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0){
                    if(!isEmpty(data.resultList.source_url)) {
                        location.replace(data.resultList.source_url);
                    }else{
                        shareWx(window.location.href,data.resultList.theme_img1,data.resultList.title,data.resultList.abstract_info);
                        var _html = template('tpl-content', data);
                        $("#content-detail").append(_html).find("section").css("width", "100%");
                        _total = data.resultList.comment.totalPage;
                        if(data.resultList.need_pay == 1) {
                            //页面滚动事件
                            checkPay(data);
                        }else{
                            //评论事件
                            loadCommentEvent();
                        }
                        initFocus();
                        //返回上一页
                        mui('div.detail-comment-area').on('tap', '.bnt-back', function(){
                            mui.back();
                        });
                    }
                }else{
                    mui.toast("获取热点详情出错");
                }
            }
        });

    }

    function checkPay(data) {
        //支付div模板
        var _html = template("tpl-payDetail", data);
        $(".pay-dialog").html(_html);
        radioCheck();
        document.addEventListener('touchmove',function(e){
            e.preventDefault();
            $(".pay-dialog").show();
        })
        $(window).scroll(function () {
            //禁止滚动
            $(document.body).css({
                "overflow-x":"hidden",
                "overflow-y":"hidden"
            });
            $(window).scrollTop(0);
            if(!isScroll){
                $(".pay-dialog").show();
            }
            isScroll = true;
        });
        loadPayEvent();
    }

    function radioCheck(){
        var _form = $('#payForm');
        _form.find('.radio').each(function(){
            $(this).on('click', function(){
                var _radio = $(this).find('input[type=radio]');
                if(!_radio.is(':checked')){
                    _radio.prop('checked', true).trigger('change');
                }else{
                    _radio.prop('checked', false).trigger('change');
                }
            })
        });

        function checkRadio(){
            _form.find('input[type=radio]').each(function(){
                var _parent = $(this).parent(), _checkName = 'checked';
                if($(this).is(':checked')){
                    _parent.addClass(_checkName);
                }else{
                    _parent.removeClass(_checkName);
                }
            });
        }

        checkRadio();

        _form.find('input[type=radio]').on('change', function(){
            checkRadio();
        });
    }

    function loadPayEvent(){
        //取消
        mui('body').on('tap', 'button.btn-pay-cancel', function () {
            $(document.body).css({
                "overflow-x":"auto",
                "overflow-y":"auto"
            });
            $(".pay-dialog").hide();
            isScroll = false;
        });
        //支付
        $('#btnPay').on('click', function(){
            var _payType = $("#payForm").find('input[type=radio]:checked').val();
            $.ajax({
                type: "POST",
                url: _basePath + "app/information/order?id=${id}&payType="+_payType,
                dataType:"json",
                success:function(data){
                    if(typeof data.resCode != undefined && data.resCode == 0){
                        mui.openWindow({
                            url:_basePath + data.resultList
                        });
                    }else if(data.resCode == 3){
                        initLogin(function () {
                            setTimeout(function () {
                                mui.openWindow({
                                    url: _basePath + "app/page?pv=info_detail&id=${id}"
                                });
                            }, 1000)
                        })
                    }else {
                        mui.toast(data['message']);
                    }
                }
            })
        })
    }


    $(function(){

        loadEvent();

        //加载更多评论列表
        $(document).on('tap', '#loadCommentMore', function(){
            if(_offset < _total){
                loadComment(_offset);
            }else{
                mui.toast("已经没有数据了");
            }
        });

        //good
        $(document).on('tap', '.clickGood', function(){
            //点赞
            var _ele = $(this),_id = $(this).data("id");
            $.ajax({
                url: _basePath + "app/information/upAdd",
                data: {
                    comment_id: _id,
                    information_id : ${id}
                },
                dataType: 'json',
                success: function (data) {
                    if(typeof data.resCode != undefined && data.resCode == 0){
                        var _goodHover = 'hover';
                        if(_ele.hasClass(_goodHover)){
                            _ele.removeClass(_goodHover);
                            _ele.text(parseInt(_ele.text())-1);
                            _ele.data("up",0);
                        }else{
                            _ele.addClass(_goodHover);
                            _ele.text(parseInt(_ele.text())+1);
                            _ele.data("up",1);
                        }
                    }else{
                        mui.toast(data['message']);
                    }
                }
            });
        });

        //作者主页
        $(document).on('tap', '.comm_logo,.comm_title', function(){
            var _id = $(this).data("id");
            mui.openWindow({
                url: _basePath + "app/page?pv=info_author&id="+_id
            })
        });

    });

    function initFocus() {
        //关注
        mui('body').on("tap", "#focus",function () {
            var unit_id = $(this).data("id");
            $.ajax({
                url: _basePath + "/app/member/focus",
                data: {
                    unit_id: unit_id
                },
                dataType: 'json',
                success: function (data) {
                    if(undefined != typeof data.resCode && data.resCode == 0) {
                        if($(".focus_btn").hasClass("on")){
                            $("#focus").text("+ 关注");
                            $(".focus_btn").removeClass("on");
                            mui.toast("取消关注成功");
                        }else{
                            $("#focus").text("已关注");
                            $(".focus_btn").addClass("on");
                            mui.toast("关注成功");
                        }
                    }else{
                        mui.toast(data['message']);
                    }
                }
            });
        })
    }

    function loadComment(offset) {
        $.ajax({
            url: _basePath + "app/information/commentList",
            data: {
                information_id: ${id},
                curPage: offset + 1
            },
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0){
                    var _html = template('tpl-comment', data.resultList);
                    $("#commentWarp").append(_html);
                    if(offset != 0){
                        _offset++;
                    }
                    _total = data.resultList.totalPage;
                }
            }
        })
    }
</script>